 <style>
        #first_tr td{text-align: center}; 
        .invalid:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color: red;  
        }

        .invalid::-moz-placeholder { /* Mozilla Firefox 19+ */
            color: red;
        }

        input.invalid:-ms-input-placeholder{
            color: red;
        }

        input.invalid::-webkit-input-placeholder {
            color: red;
        }
        img{width:25px;height: 25px;margin-left:10px}
        a{cursor: pointer}
</style>
    <div style="padding:20px">
        <article id="page1">
        <form id="form1" class="form-inline" style="margin-bottom: 20px" action="{:U('index/add')}">
            <div class="form-group">
              <label for="exampleInputName2">用户名</label>
              <input type="text" class="form-control" id="exampleInputName2" placeholder="用户名" name="user_name">
            </div>           
            <button type="button" class="btn btn-default" id="search">搜索</button>
            <button type="button" class="btn btn-default" id="add">添加用户</button>
            <button class="btn btn-primary" style="float:right;"><a href="<?php echo U('execl/exportUser')?>" style="color:#fff">一键批量生成用户</a></button>
        </form>
       <table class="table table-condensed table-bordered table-hover">
           <tr id="first_tr">
             <td>用户名</td>
             <td>加入时间</td>
             <td>最后登录时间</td>    
             <td>说明</td>
              <td>操作</td>            
           </tr>
           <?php if(!empty($userInfo) && is_array($userInfo)):?>
                <?php foreach ($userInfo as $k=>$v):?>
                  <?php if($v['user_id'] != 1):?>
                      <tr>
                        <td>{$v['user_name']}</td>
                        <td><?php echo date("Y-m-d H:i:s",$v['add_time'])?></td>
                        <td><?php echo date("Y-m-d H:i:s",$v['last_login'])?></td>     
                        <td><?=$v['role_id']== 2 ? '可使用公共照片':'仅可使用自上传照片';?></td>
                        <td>
                            <a href="#" user_id="{$v['user_id']}" class="edit"><span class="glyphicon glyphicon-edit" title="编辑"></span></a>
                            <a href="<?php echo U('index/userOrder',['user_id'=>$v['user_id']])?>"><span class="glyphicon glyphicon-list-alt" title="订单"></span></a>
                            <a href="#" user_id="{$v['user_id']}" role_id="{$v['role_id']}" class="del"><span class="glyphicon glyphicon-trash" title="删除"></span></a>
                        </td>
                      </tr>
                      <?php endif;?>
                 <?php endforeach;?>
           <?php endif;?>
        </table>
        <div class="page" style="width:500px;margin: 0 auto">{$page}</div>
</article>    

         <!--模态框开始-->
    <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="title"></h4>
      </div>
        <div class="modal-body" id="content">
            <p id="tips" style="display:none;">请输入搜索条件!</p>
            <form id="addUser" action="<?php echo U('index/addUser');?>" style="display:none;">
                <div class="form-group">
                    <label for="exampleInputEmail1">用户名</label> <label for="exampleInputEmail1" id="error2" style="color:red"></label>
                  <input type="text" class="form-control" id="exampleInputEmail1" placeholder="用户名" name="user_name">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">密 码</label> <label for="exampleInputPassword1" id="error" style="color:red"></label>
                  <input type="password" class="form-control" id="exampleInputPassword1" placeholder="6位以上密码" name="password">
                </div>    
                <div class="form-group">
                    <label class="checkbox" style="margin-left:22px;">
                        <input type="checkbox" value="1" name="mark">
                        只允许操作自己上传数据
                    </label>
                </div>
                <button type="button" class="btn btn-primary" id="adduser">添加</button>
          </form>
        </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>   
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--模态框结束-->

  <!--模态框开始-->
    <div class="modal fade" tabindex="-1" role="dialog" id="myModal2">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="title2">修改密码</h4>
      </div>
        <div class="modal-body" id="content2">         
            <form id="edit" action="<?php echo U('index/editPassword');?>">               
                <div class="form-group">
                    <label for="editPassword">密 码</label><label for="editPassword" id="lengthError" style="color:red"></label>
                  <input type="password" class="form-control" id="editPassword" placeholder="6位以上密码" name="editPassword">
                  <input type="hidden" name="user_id">
                </div>                           
                <button type="button" class="btn btn-primary" id="sure">确认</button>
          </form>
        </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>   
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--模态框结束-->

<!--模态框开始-->
    <div class="modal fade" tabindex="-1" role="dialog" id="myModal3">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="title3">友情提示</h4>
      </div>
        <div class="modal-body" id="content3">         
            <p>真的要删除该用户吗?该用户订单或图片也会一并删除!</p>
        </div>
      <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-dismiss="modal" id="delSure" user_id='' role_id="">确认</button>   
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>   
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--模态框结束-->
    </div>
    <script>
        $(function(){               
            $('.del').click(function(){
                $(this).each(function(){
                    var user_id = $(this).attr('user_id');
                    var role_id = $(this).attr('role_id');
                    $('#delSure').attr('user_id',user_id);
                    $('#delSure').attr('role_id',role_id);
                    $('#myModal3').modal('show');
                })
            })
            
            $('#delSure').click(function(){
                var user_id = $(this).attr('user_id');
                var role_id = $(this).attr('role_id');
                $.getJSON('<?php echo U("index/delUser")?>',{'user_id':user_id,'role_id':role_id},function(e){
                    if(e.status == 1){
                        $('[user_id='+user_id+']').parent().parent('tr').fadeOut();
                    }
                })
            })
            
            
            $('.edit').click(function(){
                   $(this).each(function(){
                        var user_id = $(this).attr('user_id');
                        $('input[type=hidden]').val(user_id);
                        $('#myModal2').modal('show');                        
                   })
               })
               
               $('#sure').click(function(){
                         var password = $.trim($('#editPassword').val());
                         if(password.length < 6){
                             $('#lengthError').html('密码长度不够!');
                         }else{
                             $('#edit').submit();
                         }
                        })
            
            
            $('#search').click(function(){
                var name = $.trim($('#exampleInputName2').val());
                if(name == ''){
                     $('#addUser').css('display','none');
                     $('#title').html('');
                     $('#title').html('错误提示');
                     $('#tips').show(); 
                     $('#myModal').modal('show');
                }else{
                    $('#form1').submit();
                }             
            })
            
            $('#add').click(function(){
                    $('#tips').hide(); 
                    $('#title').html('');
                    $('#title').html('添加用户');
                     $('#addUser').show();
                    $('#myModal').modal('show');
                    
                    $('#exampleInputPassword1').focus(function(){
                        var user_name = $.trim($('#exampleInputEmail1').val());
                        if(user_name == ''){
                            $('#exampleInputEmail1').focus();
                        }
                    });
                    
                   $('#exampleInputEmail1').blur(function(){
                       var user_name = $.trim($('#exampleInputEmail1').val());
                       if(user_name != ''){
                        $.getJSON("<?php echo U('index/searchUserName')?>",{'user_name':user_name},function(e){
                             if(e.status == 0){
                                 $('#error2').html(e.msg);
                             }else{
                                  $('#error2').html('');
                             }
                        })
                    }
                   });
                    
                    
                    $('#adduser').click(function(){
                        var user_name = $.trim($('#exampleInputEmail1').val());
                        var password = $.trim($('#exampleInputPassword1').val());
                        if(user_name == '' || password == ''){
                             $('#exampleInputEmail1').attr('placeholder','请输入用户名').addClass('invalid');
                             $('#exampleInputPassword1').attr('placeholder','请输入密码').addClass('invalid');
                        }else if(password.length < 6){
                             $('#error').html('长度不能小于6位');
                        }else if($('#error2').html() != ''){
                            $('#error').html('');
                             return false;
                        } else{
                            $('#addUser').submit();
                        }                      
                    })
            });
            
            $('#exit').click(function(){
                    $('#page2').slideUp('normal',function(){$('#page1').slideDown()})
            })
        })
    </script>
